<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" size="small" style="width: 200px;" class="filter-item" placeholder="商品名称/供应商名称"
        v-model="filters['keywords']"></el-input>
      <el-date-picker @keyup.enter.native="handleFilter" class="filter-item"
        size="small"
        value-format="yyyy-MM-dd"
        v-model="filters['timeStart']"
        type="date"
        placeholder="选择开始日期">
      </el-date-picker>
      <el-date-picker @keyup.enter.native="handleFilter" class="filter-item"
        size="small"
        value-format="yyyy-MM-dd"
        v-model="filters['timeEnd']"
        type="date"
        placeholder="选择结束日期">
      </el-date-picker>
      <el-button class="filter-item" type="primary" size="small" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" v-if="~accessable.indexOf('finance:notsettled_sum_export')" type="primary" size="small" v-waves icon="el-icon-document" @click="exportExcelFile">导出</el-button>
    </div>
    <el-table :data="list" :height="tableHeight" @sort-change="sortChange" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="80">
      </el-table-column>

      <el-table-column prop="providerCode" align="center" label="供应商编码" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.providerCode}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="providerShortName" align="center" label="供应商简称" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.providerShortName}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="goodsNo" align="center" label="商品编码" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.goodsNo}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="title" align="center" label="商品名称" width="400">
        <template slot-scope="scope">
          <span>{{scope.row.title}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="barCode" align="center" label="商品条码" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.barCode}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="typeCode" align="center" label="类别编码" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.typeCode}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="totalSaleNum" align="center" label="兑换数量" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.totalSaleNum}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="paymentType" align="center" label="支付方式" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.paymentType|paymentTypeName}} </span>
        </template>
      </el-table-column>
      <el-table-column prop="salePrice" align="center" label="售价（元）" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.salePrice}} </span>
        </template>
      </el-table-column>

      <el-table-column prop="points" align="center" label="积分（个）" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.points}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="price" align="center" label="微信（元）" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.price}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="totalSalePoints" align="center" label="积分总额(不含税)（个）" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.totalSalePointsRate}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalWxSaleAmount" align="center" label="微信总额(不含税)（元）" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.totalWxSaleAmountRate}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalSaleAmount" align="center" label="销售总额(不含税)（元）" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.totalSaleAmountRate}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="params.page"
        :page-sizes="[10,20,30, 50]" :page-size="params.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import baseMixin from '../../mixins/baseMixin'
let statusMap = ['正常', '冻结']
export default {
  mixins: [baseMixin],
  data () {
    return {
      total: 0,
      tableHeight: 500,
      keywords: '',
      timeStart: '',
      params: {
        limit: 50
      },
      timeEnd: '',
      rules: {}
    }
  },
  created () {
    this.init('finance_report/not_settle_summary', 0).loadData()
    this.setFilterAsPostParam()
    this.tableHeight = window.innerHeight - 300
  },
  filters: {
    statusFilter (status) {
      return statusMap[parseInt(status)]
    },
    statusTagFilter (status) {
      return ['success', 'danger'][parseInt(status)]
    }
  },
  methods: {
    exportExcelFile () {
      let url = 'admin/finance_report/not_settle_summary/export?export=1'
      let keywords = this.filters['keywords']
      let timeStart = this.filters['timeStart']
      let timeEnd = this.filters['timeEnd']
      if (keywords != undefined) {
        url += '&keywords=' + keywords
      }
      if (timeStart != undefined) {
        url += '&timeStart=' + timeStart
      }
      if (timeEnd != undefined) {
        url += '&timeEnd=' + timeEnd
      }
      this.$get(url).then(data => {
        this.$$notify('正在导出，请到导出下载列表查看结果')
      })
      // this.exportExcel({
      //   title: "账户管理",
      //   fields: [{
      //       field: "username",
      //       title: "账号名称"
      //     },
      //     {
      //       field: "createTime",
      //       title: "创建时间"
      //     },
      //     {
      //       field: "roleName",
      //       title: "角色"
      //     },
      //     {
      //       field: "status",
      //       title: "状态",
      //       valueMap: ["正常", "冻结"]
      //     }
      //   ]
      // }).then(res => {
      //   if (res.data.errcode == 0) {
      //     this.openWin(res.data.info);
      //   } else {
      //     this.$error(res.data.info);
      //   }
      // });
    }
  }
}

</script>
